<!--
 *@description:
 *@author: Ming
 *@date: 2021-05-07 15:28:42
 *@version: V1.0.5
-->
<template>
  <ul class="nav">
      <template v-if="options && options.length>0">
        <li v-for="(item,index) of options" :key="index">
            <div class="nav-title" @click="handler(item,index);change(item,index,level)" :style="{paddingLeft:level*20+'px'}">            
                <i class="nav-icon" v-if="item.icon">
                    <Icon :name="item.icon"/>
                </i>
                <slot :item="item"></slot>
                <i :class="['nav-icon','right', {'down':item.down}]" v-if="item.children">
                    <Icon name="down"/>
                </i>
            </div>
            <transition name="nav" >
                <lm-nav :options="item.children" v-if="item.children" v-show="item.down" @change="change" :level='level+1'>
                    <template v-slot="{item:items}">
                        <slot :item="items">
                    </template>
                </lm-nav>
            </transition>
        </li>
      </template>
  </ul>
</template>

<script>
import Icon from "./icon";
export default {
  name:'LmNav',
  props: {
      options:{
          type:Array,
          default(){
              return []
          }
      },
      level:{
          type:Number,
          default(){
              return 1
          }
      }
  },
  components: {
      Icon
  },
  data() {
    return {

    };
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {
    

  },
  methods: {
    handler(item,index,level){
        if(item.children){
            this.$set(this.options[index],'down',!item.down)
        }
        item.callback && item.callback(item,index,level)
    },
    change(item,index,level){
        this.$emit('change',item,index,level || this.level)
    }
  },
};
</script>

<style lang="scss" scoped>
    .nav-enter-active, .nav-leave-active {
        transition: all .5s;
        transform-origin: 50% 0;
    }
    .nav-enter, .nav-leave-to {
        // opacity: 0;
        transform: scaleY(0);
    }
    .nav{
        display: inline-block;
        text-align: left;
        // border-right: 1px solid #e6e6e6;
        list-style: none;
        position: relative;
        margin: 0;
        padding-left: 0;
        background-color: #fff;
        width: 100%;
        li{
            width: 100%;
            line-height: 56px;
            font-size: 14px;
            color: #303133;
            list-style: none;
            cursor: pointer;
            position: relative;
            transition: border-color .3s,background-color .3s,color .3s;
            box-sizing: border-box;
            white-space: nowrap;
            .nav-title{
                padding: 0 20px;
                height: 56px;
                width: 100%;
                user-select: none;
                transition: all .3s;
                .nav-icon{
                    margin-right: 5px;
                    text-align: center;
                    font-size: 18px;
                    vertical-align: middle;
                    &.right{
                        float:right;
                        font-size:12px;
                        color: #909399;
                        transition: transform .5s;
                        &.down{
                            transform: rotate(180deg);
                        }
                    }
                }
                &:hover{
                    background-color: #ecf5ff;
                }
            }
        }
    }
</style>
